<template>
  <div>
    <avue-crud
      :data="data"
      :option="optionInfo"
      :page.sync="page"
      :table-loading="tableLoading"
      @on-load="getList"
      @search-change="search"
      @search-reset="getList(page)"
      @row-del="rowDel"
      @row-update="rowUpdate"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          @click="dialogVisible = true"
          icon="el-icon-plus"
          >新增</el-button
        >
      </template>
      <template slot-scope="row" slot="menu">
        <el-button
          type="text"
          @click="updateInfo(row)"
          icon="el-icon-edit"
          style="font-size: 12px"
          >编辑</el-button
        >
        <el-button
          type="text"
          @click="deteil(row)"
          icon="el-icon-document"
          style="font-size: 12px"
          >详情</el-button
        >
      </template>
    </avue-crud>
    <template>
      <el-dialog
        title="编辑公告"
        :visible.sync="dialogVisible"
        width="100%"
        fullscreen
      >
        <avue-form
          ref="form"
          v-model="form"
          :option="optionInfoForm"
          @submit="submit"
        >
          <template slot="publicity_data">
            <avue-ueditor
              v-model="form.publicity_data"
              :options="options"
            ></avue-ueditor>
          </template>
        </avue-form>
      </el-dialog>
      <el-dialog
        title="公示详情"
        :visible.sync="dialogDeteril"
        width="100%"
        fullscreen
      >
        <div class="deteilBox">
          <el-row class="row">
            <el-col :span="12">
              <div>
                <span>公示名称: </span>
                {{ dialoRow.publicity_name }}
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <span>公示类型: </span>
                {{ dialoRow.publicity_type }}
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <div>
                <span>编号: </span>
                {{ dialoRow.publicity_number }}
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <span>备注: </span>
                {{ dialoRow.remarks }}
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="24"
              >
              <span>公示内容</span>
              <div class="html" v-html="dialoRow.publicity_data"></div>
              </el-col>
          </el-row>
        </div>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import {
  optionInfo,
  optionInfoForm,
  options,
} from "@/const/crud/Property/index";
import { addopinion, getopinion, delopinion } from "@/api/Property";
export default {
  data() {
    return {
      data: [],
      optionInfo: optionInfo(),
      optionInfoForm: optionInfoForm(),
      options: options(),
      tableLoading: false,
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      form: {},
      dialogVisible: false,
      dialogDeteril: false,
      dialoRow: {},
    };
  },
  methods: {
    updateInfo(row) {
      let data = JSON.parse(JSON.stringify(row.row));
      delete data.$index;
      this.form = data;
      this.dialogVisible = true;
    },
    deteil({ row }) {
      this.dialoRow = row;
      this.dialogDeteril = true;
    },
    submit(e, dom) {
      addopinion(e).then(
        (res) => {
          this.$message.success("操作成功");
          this.dialogVisible = false;
          this.form = {};
          this.$refs.form.resetForm();
          this.getList(this.page);
          dom();
        },
        (err) => dom()
      );
    },
    getList(page, search = {}, dom) {
      this.tableLoading = true;
      getopinion({
        page: page.currentPage,
        pageNum: page.pageSize,
        search,
      }).then((res) => {
        this.page.total = res.data.total;
        this.data = res.data.items;
        this.tableLoading = false;
        if (dom) dom();
      });
    },
    search(e, dom) {
      this.getList(this.page, e, dom);
    },
    rowDel(e) {
      let id = e.publicity_number;
      delopinion({ id }).then((res) => {
        this.$message.success("删除成功");
        this.getList(this.page);
      });
    },
    rowUpdate() {},
  },
};
</script>
<style lang="scss" scoped>
.deteilBox {
  .row {
    margin-bottom: 12px;
    span {
      // font-weight: 700;
      margin-right: 12px;
    }
    .html{
      margin-top: 12px;
      border: 2px solid #ddd;
      border-radius: 5px;
      padding: 12px;
      min-height: 300px;
    }
  }
}
</style>